<template>
  <div>
    <div class="left-nav">
      <div class="product">产品</div>
      <div>单价</div>
      <div v-if="index === 1">数量</div>
      <div>
        <i v-if="index === 1">总价</i>
      </div>
      <div></div>
    </div>
    <div class="left-list">
      <ul>
        <li v-for="item in shopList.cartInfoList" :key="item.id">
          <div class="list-product">
            <img :src="item.imgUrl" alt="" />
            <div class="product-title">
              <i>{{ item.skuName }}</i>
              <i></i>
              <div>
                <span>货号 : <i>2640040</i></span>
                <span>尺寸 : 均码</span>
              </div>

              <a href="" v-if="index === 1">加入收藏夹</a>
              <a href="" v-else>加入购物车</a>
            </div>
          </div>
          <div class="product-price">
            <strong> ￥{{ item.skuPrice }}</strong>
          </div>
          <div class="product-amount">
            <div class="select">
              <button class="reduce" @click="changeNum(-1, item)">-</button>
              <button>
                <input
                autocomplete="off"
                  type="text"
                  @change="
                    changeNum($event.target.value * 1 - item.skuNum, item)
                  "
                  :value="item.skuNum"
                  minnum="1"
                />
              </button>
              <button class="add" @click="changeNum(1, item)">+</button>
            </div>
          </div>
          <div class="product-total-price">￥{{ item.cartPrice * item.skuNum }}</div>
          <div class="product-delet">
            <button @click="deleteOne(item)">X</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "product",
  props: ["index"],
   mounted() {
   this.getShopCartList();
    
  },
  methods: {
    getShopCartList() {
      this.$store.dispatch("getShopCartList");
    },
    // 修改产品数量
    async changeNum(disNum, item) {
      if (disNum + item.skuNum < 1) {
        disNum = 1 - item.skuNum;
      }
      try {
        await this.$store.dispatch("addOrUpdateShopCart", {
          skuId: item.skuId,
          skuNum: disNum,
        });
        alert("修改产品数量成功");
        this.getShopCartList();
      } catch (error) {
        alert(error.message);
      }
    },
    //点击删除单个的购物车
    async deleteOne(item) {
      try {
        await this.$store.dispatch("deleteOneShopCart", item.skuId);
        alert("删除单个成功");
        this.getShopCartList();
      } catch (error) {
        alert(error.message);
      }
    }
  },
  computed: {
    ...mapState({
      shopCartList: (state) => state.shopcart.shopCartList,
    }),

    shopList(){
      return this.shopCartList[0] || [] 
    }
  },
};
</script>

<style lang="less">
.left-nav {
  display: flex;
  font-size: 10px;
  color: #7d7e80;
  margin-bottom: 10px;
  .product {
    margin-left: 60px;
    width: 40%;
  }
  div {
    width: 15%;
    i {
      display: block;
      margin-left: 60px;
    }
  }
}
.left-list {
  width: 94%;
  float: left;
  background-color: #fff;
  // display: flex;
  ul {
    li {
      margin: 10px auto;
      height: 120px;
      display: flex;
      .list-product {
        width: 30%;
        img {
          width: 100px;
          height: 100px;
          margin: 10px 20px;
          float: left;
        }
        .product-title {
          float: left;
          i,
          span {
            white-space: nowrap;
          }
          div {
            margin: 10px 0;
          }
          a {
            white-space: nowrap;
          }
        }
      }
      .product-price {
        text-align: center;
        height: 120px;
        line-height: 120px;
        strong {
          display: block;
          margin-left: 80px;
        }
      }
      .product-amount {
        display: flex;
        align-items: center;
        // justify-content: center;
        .select {
          width: 100%;
          // gggg
          margin: auto 20px;
          button {
            width: 40px;
            height: 40px;
            // float: left;

            border: #edeff1 1px solid;
            background: #fff;
            font-size: 30px;
            color: #323233;
            // .reduce{
            //   color: #edeff1;
            // }
            input {
              width: 40px;
              height: 30px;
              // float: left;
              color: #323233;
            }
          }
        }
      }
      .product-total-price {
        text-align: center;
        height: 120px;
        line-height: 120px;
      }
      div {
        width: 20%;
      }
      .product-delet {
        display: flex;
        width: 10%;
        align-items: center;
        button {
          width: 40px;
          height: 30px;
          border: #edeff1 1px solid;
          background: #fff;
          font-size: 15px;
          color: #323233;
          font-weight: 700;
          // text-align: center;
        }
      }
    }
  }
}
</style>
